<template>
  <el-select
    style="width: 150px"
    v-model="status"
    placeholder="请选择审批状态"
    clearable
    @change="queryChange"
  >
    <el-option
      v-for="(item, index) in statusList"
      :key="index"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>
<script>
import { defineComponent, computed, reactive } from "vue";

export default defineComponent({
  name: "AreaSelect",
  props: {
    modelValue: {
      // 选中的值
      type: String,
      default: null,
    },
    clearable: {
      // 可清除
      type: Boolean,
      default: false,
    },
    placeholder: {
      // 选中的部门
      type: String,
      default: "筛选审批状态",
    },
  },
  emits: ["update:modelValue", "query-change"],
  setup(props, { emit }) {
    const status = computed({
      get: () => props.modelValue,
      set: (val) => emit("update:modelValue", val),
    });

    const queryChange = (val) => {
      emit("query-change", val);
    };
    const statusList = reactive([
      {
        label: '已审批',
        value: 4
      },
      {
        label: '未审批',
        value: 1
      }
    ])
    return {
      queryChange,
      statusList,
      status,
    };
  }
});
</script>

<style lang="scss" scoped>
:deep(.el-table) thead th {
  background: #f2f3f5;
  color: #333;
}
.pagination-container {
  padding-top: 20px;
  text-align: right;
  min-height: 48px;
}
.pagination-container.hidden {
  display: none;
}
.el-pagination {
  padding: 0;
}
.tag {
  display: inline-block;
  height: 18px;
  line-height: 18px;
  width: 40px;
  text-align: center;
  font-size: 12px;
  border-radius: 2px;
  &.blue {
    color: #5573e4;
    background: rgba(85, 115, 228, 0.1);
    border: 1px solid rgba(85, 115, 228, 0.6);
  }
  &.yellow {
    color: #f7b500;
    background: rgba(247, 181, 0, 0.1);
    border: 1px solid rgba(247, 181, 0, 0.6);
  }
}
</style>